<template>
    <!-- 卡槽式反问 -->
    <div class="w-full h-full">
        <div class="w-full h-full pt-10" v-show="!isshow">
            <section class="center-box rounded m-auto p-5">
                <div class="head-title text-2xl text-center pb-6 font-light">需要反问的资料</div>
                <div class="dashed px-8"></div>
                <div class="info-reply-box">
                    <div class="all-delete my-4 flex justify-end">
                        <el-link type="danger" @click="allDelete" :disabled="isDefined">全部删除</el-link>
                    </div>
                    <div class="info-reply">
                        <el-scrollbar  max-height="420">
                            <el-card class="w-full mb-4" v-for="(item, index) in defaultData" :key="index">
                                <div class="card-left">
                                    <el-input class="borderless" placeholder="输入选项" ref="inputRefs"
                                        v-model="defaultData[index].name" />
                                </div>
                                <div class="card-right ml-3">
                                    <i class="iconfont icon-shanchu text-2xl text-red-500 cursor-pointer"
                                        @click="deleteRow(index)"></i>
                                </div>
                            </el-card>
                        </el-scrollbar>
                    </div>
                    <div class="add-one mt-4" @click="addData">+ 添加一行</div>
                </div>
                <div class="flex justify-end items-center pt-8 pb-4">
                    <el-button @click="defaultClick">使用默认值</el-button>
                    <el-button type="primary" @click="onClickBackStart(true)">启动反问</el-button>
                </div>
            </section>
        </div>
        <div class="w-full h-full" v-show="isshow">
            <CustomerService :fromCaseInfoEnter="false" :sessionType="30" :auxiliaryanswer="false"
                :slotsArray="slotsArray" :trainobj="{}" :customertran="false" :isShowSlots="true" />
        </div>
    </div>
</template>
<script lang="ts" setup>
import CustomerService from '../../ai/customer-service.vue';
const router = useRouter()
const isshow = ref(false);
const defaultData = ref([]);
const inputRefs = ref([]);
const slotsArray = ref([]);
//  控制链接禁用状态
const isDefined =ref(true);
//点击开始反问函数 
function onClickBackStart(data: boolean) {
    if (data) {
        if (defaultData.value.length === 0) {
            ElMessage.error('请添加反问资料');
            return;
        }
        // 有且只有一项时，这一项的name不能是空
        if (defaultData.value.length === 1 && defaultData.value[0].name === '') {
            ElMessage.error('请添加有效的反问资料');
            return;
        }
        slotsArray.value = defaultData.value;
    } else {
        defaultData.value = [];
        slotsArray.value = [];
    }

    isshow.value = data;
}
provide('End_Start', onClickBackStart)


//设置默认值
const defaultClick = () => {
    defaultData.value = [{ name: '姓名' }, { name: '电话' }, { name: '户号' }, { name: '水表号' }, { name: '地址' }]
}
//添加一行
const handleFocusAndCheckStatus = () => {
    const lastIndex = defaultData.value.length - 1;
    if (lastIndex < inputRefs.value.length) {
        inputRefs.value[lastIndex].focus(); // 将焦点移动到最后一个输入框
    }
    // 检查链接状态
    checkLinkStatus();
};

const addData = () => {
    if (defaultData.value.length > 0) {
        const lastIndex = defaultData.value.length - 1;
        if (defaultData.value[lastIndex].name === '') {
            ElMessage.error('请填写上次添加的行内容');
            return;
        }
    }
    defaultData.value.push({ name: '' });

    nextTick(handleFocusAndCheckStatus);
};
watch(defaultData, (newValue) => {
    // console.log('newValue',newValue);
        isDefined.value = newValue.length === 0;
 });
//删除当前行
const deleteRow = (index: any) => {
    defaultData.value.splice(index, 1);
    //链接禁用状态
    checkLinkStatus()
};
function checkLinkStatus (){
    //链接禁用状态
    if(defaultData.value.length>0){
        isDefined.value=false;
    }else{
        isDefined.value=true;
    }
};
//全部删除
const allDelete = () => {
    ElMessageBox.confirm('确定要删除所有项吗？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        defaultData.value = [];
        ElMessage.success('删除成功')
    }).catch(() => {
        ElMessage.info('已取消删除');
    });

}
// 页面缓存，清空所有的内容
watch(
    () => router.currentRoute.value,
    (newValue: any) => {
        isshow.value = false;
        defaultData.value = []
    },
    { immediate: true }
);
</script>
<style scoped>
.center-box {
    width: 642px;
    border: 2px dashed var(--el-border-color);
    box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, .04), 0px 8px 20px rgba(0, 0, 0, .08);
}

.center-box:hover {
    border-color: #409EFF;
}

.head-title {
    color: #409EFF;
}

.text-color {
    color: #999;
    text-align: right;
}

.dashed {
    border-top: 1px solid var(--el-border-color);
}

.center-box /deep/ .el-radio-group {
    flex-direction: column;
    align-items: baseline
}

.add-one {
    cursor: pointer;
    text-align: center;
    /* height: 40px; */
    background-color: transparent;
    font-size: 14px;
    /* line-height: 40px; */
    border-radius: 5px;
    color: #faa800;
    border: 1px solid #faa800;
    padding: 10px 0;
}

.add-one:hover {
    background-color: #faa800;
    color: #fff;
}

:deep(.el-card__body) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

:deep(.borderless .el-input__wrapper) {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.card-left {
    flex: 1;
}
</style>